<template>
  <div class="">
    <h1>选中删除效果</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input
          type="checkbox"
          v-model="result"
          :value="item"
          @change="change"
        />
        {{ item.title }}
      </li>
    </ul>

    全选： <input type="checkbox" v-model="checked" @change="checkall" />

    <button @click="removesel">选中删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: "任务一" },
        { id: 2, title: "任务一2" },
        { id: 3, title: "任务一3" },
        { id: 4, title: "任务一4" },
        { id: 5, title: "任务一5" },
        { id: 6, title: "任务一6" },
        { id: 7, title: "任务一7" },
      ],
      result: [],
      //复选框组的v-model

      checked: false,
      //全选按钮 就一个所以v-model的是布尔值
    };
  },
  mounted() {},
  methods: {
    removesel() {
      //把不删的留下来,就是把要删的删除
      this.list = this.list.filter((item) => {
        return this.result.includes(item) == false;
        //返回 item不在result里，证明这个item没有被选中，就是不被删除的
      });
      this.change();
    },
    checkall() {
      if (this.checked == true) {
        this.result = this.list;
        //如果checked是true证明全选按钮被选中了，
      } else {
        this.result = [];
        //如果checked是false 证明反选
      }
    },
    change() {
      if (this.result.length == this.list.length && this.list.length != 0) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
